import React, { useState } from 'react';
import copy from 'copy-to-clipboard';  // 用于复制内容
import { Button } from 'antd';
import { CopyOutlined, CheckOutlined } from '@ant-design/icons';  // 导入图标

interface CodeBlockProps {
  value: string;  // 代码块的内容
}

const CodeBlock: React.FC<CodeBlockProps> = ({ value }) => {
  const [copied, setCopied] = useState<boolean>(false);

  const handleCopy = () => {
    copy(value);
    setCopied(true);
    setTimeout(() => setCopied(false), 1500); // 1.5秒后重置“已复制”状态
  };

  return (
    <div
      style={{
        position: 'relative',
        backgroundColor: '#2d2d2d',
        padding: '10px',
        borderRadius: '5px',
        color: '#f5f5f5',
        overflowX: 'auto',
      }}
    >
      <pre style={{ marginBottom: 0 }}>
        <code>{value}</code>
      </pre>
      <Button
        size="small"
        style={{
          position: 'absolute',
          top: 5,
          right: 5,
          zIndex: 1,
          backgroundColor: '#444',  // 深色背景按钮
          color: '#fff',             // 按钮文字白色
        }}
        onClick={handleCopy}
        icon={copied ? <CheckOutlined /> : <CopyOutlined />}
      >
        {copied ? 'Copied' : 'Copy'}
      </Button>
    </div>
  );
};

export default CodeBlock;
